<template>
<section>
  <swiper :auto="true" height="220px" :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
  <group>
    <cell v-if="product.name"  title="名称" :value="product.name"></cell>
    <cell v-if="product.productiveTime"  title="生产时间" :value="product.productiveTime.split(' ')[0]"></cell>
    <cell v-if="product.productiveAddress" title="生产地点" :value="product.productiveAddress"></cell>
    <cell v-if="product.storageMethod"  title="储存方式" :value="product.storageMethod"></cell>
    <cell v-if="product.qgp" title="保质期" :value="product.qgp"></cell>
  </group>
</section>
</template>

<script>
import { Swiper, SwiperItem, Group, Cell } from "vux";
import { mapState } from "vuex";
export default {
  components: {
    Swiper,
    SwiperItem,
    Group,
    Cell
  },
  computed: {
    ...mapState({
      product: state => state.product
    })
  },
  data() {
    return {
      demo01_index: 0,
      demo01_list: [
        {
          url: "javascript:",
          img: "/wap/static/swiper/1.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/2.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/3.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/4.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/5.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/6.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/7.jpg"
        }
      ]
    };
  },
  methods: {
    demo01_onIndexChange(index) {
      this.demo01_index = index;
    }
  },
  created() {
    console.log(this.$route.params.id);
  }
};
</script>

<style scoped>
.weui-grid__label {
  color: #6c6c6c;
}
.fa {
  font-size: 36px;
  color: #04be02;
}
.weui-grid__icon {
  margin-bottom: 5px;
}
.vux-demo {
  text-align: center;
}

.logo {
  width: 100px;
  height: 100px;
}

.ximg-demo {
  width: 100%;
  height: auto;
}

.ximg-error {
  background-color: yellow;
}

.ximg-error:after {
  content: "加载失败";
  color: red;
}
</style>
